<template>
  <div class="tpl44-adv">
    <section class="style53_ad_container ad_box">
      <div v-if="tplItemData.dataset" class="ad_one">
        <a @click="openPage(tplItemData.dataset[0].link)">
          <img :src="tplItemData.dataset[0].pic"/>
        </a>
      </div>
      <div class="ad_bot">
        <div class="ad_left">
          <a @click="openPage(tplItemData.dataset[1].link)">
            <img :src="tplItemData.dataset[1].pic"/>
          </a>
        </div>
        <ul class="ad_right">
          <li>
            <a @click="openPage(tplItemData.dataset[2].link)">
              <img :src="tplItemData.dataset[2].pic"/>
            </a>
          </li>
          <li>
            <a @click="openPage(tplItemData.dataset[3].link)">
              <img :src="tplItemData.dataset[3].pic"/>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openPage(link) {
      // console.log('link',link)
      openPage(link)
    }
  },
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl44-adv{
  .formitems .adv_si{
    padding-left: 240px;
    color: #666;
    font-size: 22px;
  }
  .ad_box{
    img{
      width: 100%;
    }
    .ad_bot{
      width: 100%;
      display: inline-flex;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      .ad_left{
        width: 40%;
      }
      .ad_right{
        width: 60%;
        border-left: 2px solid #e3e3e3;
        box-sizing: border-box;
        li:nth-child(2){
          border-top: 2px solid #e3e3e3;
        }
      }
    }
  }
}
</style>
